<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
import APICommon from '@/api/common/index'
const chunkDom = shallowRef<null | HTMLDivElement>(null)
    const $router = useRouter()

function onGoLeft() {
    if (!chunkDom.value) return
    const scrollLeft = chunkDom.value.scrollLeft
    chunkDom.value.scrollTo({
        left: scrollLeft - 300,
        behavior: 'smooth'
    })
}

function onGoRight() {
    if (!chunkDom.value) return
    const scrollLeft = chunkDom.value.scrollLeft
    chunkDom.value.scrollTo({
        left: scrollLeft + 300,
        behavior: 'smooth'
    })
}

const isShowLeftBtn = shallowRef<boolean>(false)

const isShowRightBtn = shallowRef<boolean>(true)

onMounted(() => {
    if (!chunkDom.value) return
    chunkDom.value.addEventListener('scroll', function () {
        // div 内已滚动的距离
        let scrollLeft = this.scrollLeft
        let scrollWidth = this.scrollWidth
        // 是否到达底部
        let isScrollBottom = Math.ceil(scrollLeft) == scrollWidth - this.clientWidth

        // 是否到达顶部
        let isScrollTop = scrollLeft == 0

        if (isScrollBottom) {
            isShowRightBtn.value = false
        } else {
            isShowRightBtn.value = true
        }

        if (isScrollTop) {
            isShowLeftBtn.value = false
        } else {
            isShowLeftBtn.value = true
        }

    })
})

const periodsList = ref<any[]>([])

function getPeriodsList() {
    APICommon.getPeriodsList().then(({ data }) => {
        periodsList.value = data
    })
} getPeriodsList()

function handleJumpGather(id: number) {
    window.open($router.resolve(`/calendar-gather/${id}`).href, '_blank')
}

</script>

<template>
    <div class="content-picture">
        <div class="chunk" ref="chunkDom">
            <div class="chunk-item" v-for="item in periodsList" :key="item" @click="handleJumpGather(item.id)" >
                <div class="chunk-item-content">
                    <div class="festival-image">
                        <img v-if="item.image" :src="item.image" alt="image" />
                    </div>
                    <div class="time">
                        <div>{{ item.name }}</div>
                        <div>{{ item.start_time }}</div>
                    </div>
                    <div class="distance">
                        <div>距今</div>
                        <div><span>{{ item.days }}</span>天</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn">
            <button @click="onGoLeft" v-show="isShowLeftBtn">
                <el-icon color="var(--primary-color)">
                    <ArrowLeftBold />
                </el-icon>
            </button>
            <button @click="onGoRight" v-show="isShowRightBtn">
                <el-icon color="var(--primary-color)">
                    <ArrowRightBold />
                </el-icon>
            </button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.content-picture {
    position: relative;
    height: 62px;

    .chunk {
        white-space: nowrap;
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .chunk-item {
            display: inline-block;
            width: 225px;
            height: 62px;
            border-radius: 33px;
            background-color: rgba(245, 245, 245, 1);
            color: rgba(16, 16, 16, 1);
            cursor: pointer;

            &:not(&:last-child) {
                margin-right: 57px;
            }

            .chunk-item-content {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;

                .distance {
                    margin-left: 13px;
                    padding-left: 8px;
                    position: relative;

                    &::before {
                        content: '';
                        display: block;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 20px;
                        background-color: rgba(187, 187, 187, 1);
                    }

                    div {
                        color: rgba(16, 16, 16, 1);

                        &:first-child {
                            line-height: 24px;
                            font-size: 14px;
                        }

                        &:last-child {
                            margin-top: 1px;
                            line-height: 17px;
                            font-size: 12px;

                            span {
                                color: var(--primary-color);
                            }
                        }
                    }
                }

                .time {
                    margin-left: 5px;

                    div {
                        &:first-child {
                            line-height: 24px;
                            color: rgba(16, 16, 16, 1);
                            font-size: 16px;
                        }

                        &:last-child {
                            line-height: 17px;
                            color: rgba(187, 187, 187, 1);
                            font-size: 12px;
                            margin-top: 1px;
                        }
                    }
                }

                .festival-image {
                    width: 48px;
                    height: 48px;
                    background-color: #ffffff;
                    border-radius: 50%;
                    margin-left: 9px;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }
            }
        }
    }



    .btn {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);

        button {
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            border: none;
            cursor: pointer;

            &:first-child {
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            &:last-child {
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}
</style>